<template>
  <div class="role-list">
    <el-input v-model="search" size="large" placeholder="搜索" style="width: 250px;" @input="handleInputChange"/>
    <el-button type="primary" size="large" @click="addFormVisible = true"
               style="margin-right: 10px;margin-left: 1095px">添加角色
    </el-button>
    <el-button type="danger" size="large" @click="deleteFormVisible = true">删除角色</el-button>

    <!-- 添加角色的对话框 -->
    <el-dialog v-model="addFormVisible" title="添加角色">
      <el-form :model="addRoleForm" ref="form">
        <!-- 表单内容，比如输入框等 -->
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="addRoleForm.name" autocomplete="off" placeholder="请输入角色名称"/>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input v-model="addRoleForm.passWord" autocomplete="off" placeholder="请输入用户密码"/>
        </el-form-item>
        <el-form-item label="用户电话（账号）" :label-width="formLabelWidth">
          <el-input v-model="addRoleForm.phone" autocomplete="off" placeholder="请输入用户电话"/>
        </el-form-item>
        <el-form-item label="用户邮箱" :label-width="formLabelWidth">
          <el-input v-model="addRoleForm.email" autocomplete="off" placeholder="请输入用户邮箱"/>
        </el-form-item>
        <el-form-item label="用户住址" :label-width="formLabelWidth">
          <el-input v-model="addRoleForm.room" autocomplete="off" placeholder="请输入用户住址"/>
        </el-form-item>
        <el-form-item label="用户身份" :label-width="formLabelWidth">
          <el-select v-model="addRoleForm.identity" placeholder="请选择用户身份">
            <el-option label="用户" value="0"/>
            <el-option label="商户" value="1"/>
            <el-option label="物业" value="2"/>
          </el-select>
        </el-form-item>
        <!-- 更多表单项... -->
      </el-form>
      <template #footer>
      <span class="dialog-footer center-buttons">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddRole(addRoleForm)">确 定</el-button>
      </span>
      </template>
    </el-dialog>

  </div>

  <el-table :data="tableList" style="width: 100%" class="table">
    <el-table-column type="selection" width="55" align="center"/>
    <el-table-column label="角色名字" prop="name" width="200px" align="center"/>
    <el-table-column label="用户电话" prop="phone" width="200px" align="center"/>
    <el-table-column label="身份" prop="identity" width="200px" align="center"/>
    <el-table-column label="用户邮箱" prop="email" width="250px" align="center"/>
    <el-table-column label="用户住址" prop="room" width="200px" align="center"/>
    <el-table-column align="right">
      <template #default="scope">
        <el-button size="large" @click="handleEdit(scope.$index, scope.row)" class="Modifybutton">
          修改
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="custom-pagination">
    <el-pagination
        :page-size="5"
        :pager-count="5"
        layout="prev, pager, next"
        :total=pageTotal
        background
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import *as adminfunction from '../api/admin'
import {ElMessage} from "element-plus";

let addFormVisible = ref(false)
const tableData = ref([])
let tableList = ref([])//分页切割数组
const formLabelWidth = '140px'
const search = ref('')
let pageInfo = {
  pagenum: 1,//当前页数
  pagesize: 5,//每页数据
}
let pageTotal = ref()

//添加属性
const addRoleForm = reactive({
  name: '',
  passWord: '',
  identity: '',
  phone: '',
  email: '',
  room: ''
})

//模糊搜索
// const handleInputChange = () => {
//   // event.target.value 将包含当前输入框的值
// console.log(search.value)
//   adminfunction.queryByName(search.value).then((res)=>{
//
//     tableData.value = res.data.data;
//     tableData.value.forEach(item => {
//       if (item.identity == "0") {
//         item.identity = "用户"
//       } else if (item.identity == "1") {
//         item.identity = "商户"
//       } else if (item.identity == "2") {
//         item.identity = "物业"
//       }
//     });
//     pageTotal = tableData.value.length
//     changeTable()
//
//   })  // 在这里可以执行你需要的逻辑，比如搜索请求、数据处理等
//   // this.search = event.target.value; // 如果使用Vue 2的options API，这句会更新绑定的search值，但Vue 3 Composition API中不需要手动更新，v-model已自动处理
// };

onMounted(() => {
  adminfunction.allUser().then((res) => {
    console.log(res.data.data[3].identity)
    tableData.value = res.data.data;
    tableData.value.forEach(item => {
      if (item.identity == "0") {
        item.identity = "用户"
      } else if (item.identity == "1") {
        item.identity = "商户"
      } else if (item.identity == "2") {
        item.identity = "物业"
      }
    });
    pageTotal = tableData.value.length
    changeTable()
  })
})

//添加-提交
const submitAddRole = (addRoleForm) => {
  const fromData = {...addRoleForm}
  console.log("111111111111111")
  console.log(fromData)
  adminfunction.addUser(addRoleForm).then((res) => {
    console.log("22222222222")
    console.log(res.data.message);
    ElMessage.success(" 添加成功 ");
    setTimeout(function () {
      window.location.reload();
    }, 1000);
  })
}

//修改
const handleEdit = (index, row) => {
  console.log(index, row)
}

//监听当前页数改变，并传入想要查看的页数
const handleCurrentChange = (newpage) => {
  pageInfo.pagenum = newpage
  changeTable()
}

//分页
//每次分页参数改变后重新分割数组
const changeTable = () => {
  let begin = 0 + pageInfo.pagesize * (pageInfo.pagenum - 1)
  let end = begin + pageInfo.pagesize
  //console.log(tableData.value.slice(begin,end))
  console.log(tableData.value)
  console.log(tableData)

  tableList.value = tableData.value.slice(begin, end)
  console.log(tableList)
}
</script>


<style>
.role-list {
  margin-top: 20px;
  margin-left: 20px;
}

.table {
  margin-top: 20px;
}

.Modifybutton {
  margin-right: 40px;
}

.center-buttons {
  display: flex;
  justify-content: center;
  position: relative;
  bottom: 10px;
}

.dialog-footer button:first-child {
  margin-right: 50px;
}

.custom-pagination {
  position: fixed;
  bottom: 20px; /* 距离底部20px */
  right: 20px;
}
</style>